<template>
  <ProTable
    class-name="no-card customTable"
    ref="proTable"
    :columns="columns"
    :data="props.tables.data"
    :init-param="initParam"
    :pagination="true"
    :border="false"
    :tool-button="false"
    :cell-class-name="tableColClassName"
    @row-click="rowClick"
    :title="props.tables.title"
  >
    <!-- 表格操作 -->
    <template #operation="scope">
      <el-button type="primary" class="scope-button" link :icon="Phone" @click="openDrawer('【ivr外呼+短信】督办', scope.row)">
        ivr+短信
      </el-button>
      <el-button type="primary" class="scope-button" link :icon="Promotion" @click="openDrawer('工单督办', scope.row)">
        工单督办
      </el-button>
    </template>
  </ProTable>
  <DrawerPage ref="drawerRef" />
</template>

<script setup lang="tsx">
import { reactive, ref } from "vue";
import ProTable from "@/components/ProTable/index.vue";
import { ProTableInstance } from "@/components/ProTable/interface";
import type { TableColumnCtx } from "element-plus/es/components/table/src/table-column/defaults";
import { Phone, Promotion } from "@element-plus/icons-vue";
import DrawerPage from "@/views/datascreenV2/components/DrawerPage.vue";
import { SendIvrApi } from "@/api/modules/ivr";

// ProTable 实例
const proTable = ref<ProTableInstance>();
const emit = defineEmits(["clickEvent", "clickCycle"]);
const initParam = reactive({ departmentId: "1" });

const props = withDefaults(defineProps<{ tables: any }>(), { tables: () => [] });

// 表格配置项
// const columns = reactive<ColumnProps<any>[]>(props.tables.column);

const columns = reactive<any[]>([
  { prop: "区县", label: "区县", showOverflowTooltip: false },
  { prop: "满意度", label: "满意度", showOverflowTooltip: false },
  { prop: "样本量", label: "样本量", showOverflowTooltip: false },
  { prop: "低满样本量", label: "低满样本量", showOverflowTooltip: false },
  { prop: "1分", label: "1分", showOverflowTooltip: false },
  { prop: "2分", label: "2分", showOverflowTooltip: false },
  { prop: "3分", label: "3分", showOverflowTooltip: false },
  { prop: "4分", label: "4分", showOverflowTooltip: false },
  { prop: "5分", label: "5分", showOverflowTooltip: false },
  { prop: "6分", label: "6分", showOverflowTooltip: false },
  { prop: "7分", label: "7分", showOverflowTooltip: false },
  { prop: "8分", label: "8分", showOverflowTooltip: false },
  { prop: "9分", label: "9分", showOverflowTooltip: false },
  { prop: "10分", label: "10分", showOverflowTooltip: false },
  { prop: "已修复", label: "已修复", showOverflowTooltip: false },
  { prop: "未修复", label: "未修复", showOverflowTooltip: false }
]);

// 单击行
const rowClick = (row: any, column: TableColumnCtx<any>) => {
  // console.log(row, column);
  if (column.label === "操作") return;
  if (row["区县"] === "累计值") return;
  emit("clickEvent", { gird: row.区县, label: column.label, val: row[column.label], name: props.tables.title });
};

// 标注背景颜色
const tableColClassName = ({ column, row }: { column: any; columnIndex: number; row: any; rowIndex: number }) => {
  if (column.label === "组长") return "default-row";
  if (column.label === "评分权重" || column.label === "全省排名") return "success-row";
  return "white-text";
  // console.log(column);
  // return column.color;
  row;
};

// 打开 drawer(新增、查看、编辑)
const drawerRef = ref<InstanceType<typeof DrawerPage> | null>(null);
const openDrawer = (title: string, row: Partial<any> = {}) => {
  const params = {
    title,
    isView: false,
    row: { ...row },
    api: title === "【ivr外呼+短信】督办" ? SendIvrApi : undefined,
    getTableList: proTable.value?.getTableList
  };
  console.log(drawerRef.value);
  drawerRef.value?.acceptParams(params);
};
</script>

<style lang="scss" scoped>
// .el-button--primary {
//   --el-button-text-color: #ffffff;
// }
.scope-button {
  color: aqua;
}
</style>
